<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
            Vue.config.productionTip=false//阻止vue启动时产生提示
           const vm= new Vue({
                 el: "#root",
                 data:{
                     isHot:true

                    },
                 methods:{
                    changeWeather(){
                        this.isHot=!this.isHot
                    }
                 },
                computed:{
                     info(){
                         return this.isHot?'炎热':'寒冷'
                     }
                },
                /*watch:{
                     isHot:{
                         immediate:true,//初始化时让handler调用一下
                         //handler什么时候调用？当isHot发生改变的时候
                         handler(newValue,oldValue){
                            console.log('isHot被修改了',newValue,oldValue)
                         }
                     }
                }*/
             })
            //后续需要监听时调用vm
            vm.$watch('isHot',{
                immediate:true,//初始化时让handler调用一下
                //handler什么时候调用？当isHot发生改变的时候
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)}
            })
    </script>
</body>
</html>